---
title: Hyper Text
date: 2024-10-05
description: A hyper changing text animation as you hover.
author: nyxb
published: true
---

<ComponentPreview name="hyper-text-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add hyper-text
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install framer-motion
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="hyper-text" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Props

| Prop          | Type     | Description                                        | Default |
| ------------- | -------- | -------------------------------------------------- | ------- |
| className     | string   | The class name to be applied to the component      |         |
| duration      | number   | The duration for which the animation runs.         | 80      |
| text          | string   | Text to animate                                    | ""      |
| framerProps   | Variants | An object containing framer-motion animation props | {}      |
| animateOnLoad | boolean  | Play animation on load                             | true    |
